<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>分页 - layui</title>

		<link rel="stylesheet" href="/static/layui/css/layui.css">
	</head>
	<body>

		总页数低于页码总数：<div id="demo0"></div>
		总页数大于页码总数：<div id="demo1"></div>
		自定义主题：<div id="demo2"></div>
		自定义首页、尾页、上一页、下一页文本：<div id="demo3"></div>
		不显示首页尾页：<div id="demo4"></div>
		开启HASH：<div id="demo5"></div>
		只显示上一页、下一页：<div id="demo6"></div>
		显示完整功能：<div id="demo7"></div>
		自定义排版：<div id="demo8"></div>

		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			<legend>将一段已知数组分页展示</legend>
		</fieldset>

		<div id="demo9"></div>

		<ul id="biuuu_city_list"></ul>


		<script src="/static/layui/layui.js"></script>
		<script src="/static/layui/lay/modules/layer.js"></script>
		<script src="/static/layui/lay/modules/laypage.js"></script>
		<script>
			layui.use(['laypage', 'layer'], function() {
				var laypage = layui.laypage,
					layer = layui.layer;


				//总页数低于页码总数
				laypage.render({
					elem: 'demo0',
					count: 50 //数据总数
				});

				//总页数大于页码总数
				laypage.render({
					elem: 'demo1',
					count: 70 //数据总数
						,
					jump: function(obj) {
						console.log(obj)
					}
				});

				//自定义样式
				laypage.render({
					elem: 'demo2',
					count: 100,
					theme: '#1E9FFF'
				});

				//自定义首页、尾页、上一页、下一页文本
				laypage.render({
					elem: 'demo3',
					count: 100,
					first: '首页',
					last: '尾页',
					prev: '<em>←</em>',
					next: '<em>→</em>'
				});

				//不显示首页尾页
				laypage.render({
					elem: 'demo4',
					count: 100,
					first: false,
					last: false
				});

				//开启HASH
				laypage.render({
					elem: 'demo5',
					count: 500,
					curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页
						,
					hash: 'fenye' //自定义hash值
				});

				//只显示上一页、下一页
				laypage.render({
					elem: 'demo6',
					count: 50,
					layout: ['prev', 'next'],
					jump: function(obj, first) {
						if (!first) {
							layer.msg('第 ' + obj.curr + ' 页');
						}
					}
				});

				//完整功能
				laypage.render({
					elem: 'demo7',
					count: 100
						//,groups: 0
						,
					layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip', ],
					jump: function(obj) {
						console.log(obj)
					}
				});

				//自定义排版
				laypage.render({
					elem: 'demo8',
					count: 1000,
					layout: ['limit', 'prev', 'page', 'next']
						//,limits: [100, 200, 300]
						,
					limit: 200
				});



				//将一段数组分页展示

				//测试数据
				var data = [
					'北京',
					'上海',
					'广州',
					'深圳',
					'杭州',
					'长沙',
					'合肥',
					'宁夏',
					'成都',
					'西安',
					'南昌',
					'上饶',
					'沈阳',
					'济南',
					'厦门',
					'福州',
					'九江',
					'宜春',
					'赣州',
					'宁波',
					'绍兴',
					'无锡',
					'苏州',
					'徐州',
					'东莞',
					'佛山',
					'中山',
					'成都',
					'武汉',
					'青岛',
					'天津',
					'重庆',
					'南京',
					'九江',
					'香港',
					'澳门',
					'台北'
				];

				//调用分页
				laypage.render({
					elem: 'demo9',
					count: data.length,
					layout: ['prev', 'page', 'next', 'refresh', 'skip'],
					jump: function(obj) {
						//模拟渲染
						document.getElementById('biuuu_city_list').innerHTML = function() {
							var arr = [],
								thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj
									.limit);
							layui.each(thisData, function(index, item) {
								arr.push('<li>' + item + '</li>');
							});
							return arr.join('');
						}();
					}
				});

			});
		</script>
	</body>
</html>
